<template>
  <div class="user-info animate__animated animate__fadeInLeft">
    <!-- 展示用户的基础信息 -->
    <user-info-display v-bind="userinfo" v-if="flag">
      <!-- 通过插槽的方式，把操作的内容作为组件底部的内容进行传递 -->
      <div class="operate-wrap">
        <el-divider></el-divider>
        <div class="operate">
          <el-tooltip content="修改基本信息" placement="bottom" effect="light">
            <el-link
              :underline="false"
              type="warning"
              class="item"
              @click="
                flag = false;
                componentName = 'UserInfoEdit';
              "
              ><i class="el-icon-edit-outline"></i>
            </el-link>
          </el-tooltip>

          <el-divider direction="vertical"></el-divider>

          <el-tooltip content="修改密码" placement="bottom" effect="light">
            <el-link
              :underline="false"
              type="danger"
              class="item"
              @click="
                flag = false;
                componentName = 'UserInfoPassword';
              "
              ><i class="el-icon-lock"></i>
            </el-link>
          </el-tooltip>

          <el-divider direction="vertical"></el-divider>

          <el-tooltip content="修改头像" placement="bottom" effect="light">
            <el-link
              :underline="false"
              type="primary"
              class="item"
              @click="
                flag = false;
                componentName = 'UserInfoAvatar';
              "
              ><i class="el-icon-camera" type="success"></i>
            </el-link>
          </el-tooltip>
        </div>
      </div>
    </user-info-display>

    <!-- 对用户基本信息的操作 -->
    <div v-else>
      <!-- 切换组件 -->
      <!-- ref: 如果放在标签中，返回当前标签 
        如果放在组件中，返回当前组件对象（我们可以使用该组件对象中的所有内容）
             -->
      <component :is="componentName" ref="com" v-bind="userinfo"></component>

      <!-- 进行确认操作 -->
      <div class="operate-wrap animate__animated animate__fadeInLeft">
        <el-divider></el-divider>
        <div class="operate">
          <el-link
            :underline="false"
            type="warning"
            class="item"
            @click="onSave"
          >
            <i :class="false ? 'el-icon-loading' : ''"></i>确认
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link
            :underline="false"
            type="danger"
            class="item"
            @click="flag = true"
            ><i class=""></i>返回</el-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfoDisplay from "./UserInfoDisplay";
import UserInfoPassword from "./UserInfoPassword";
import UserInfoEdit from "./UserInfoEdit.vue";
import UserInfoAvatar from "./UserInfoAvatar.vue";
import { mapState } from "vuex";

export default {
  name: "UserInfo",
  components: {
    UserInfoPassword,
    UserInfoDisplay,
    UserInfoAvatar,
    UserInfoEdit,
  },
  data() {
    return {
      flag: true,
      componentName: "UserInfoPassword",
    };
  },
  computed: {
    ...mapState("user", ["userinfo"]),
  },
  methods: {
    onSave() {
      this.flag = true;
      this.$refs.com.save && this.$refs.com.save(); // 间接执行保存各种不同内容的方法
    },
  },
};
</script>

<style lang="scss" scoped>
.user-info {
  position: relative;

  height: 320px;
  .operate-wrap {
    // height: 320px;
    align-self: stretch;
  }
  .operate {
    // position: absolute;
    // bottom: 20;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    .el-divider--vertical {
      height: 1.5em;
    }

    .item {
      font-size: 20px;
      flex: 1;
    }
  }
}
.btn-primary[data-v-beb415c8] {
  width: 100px;
  position: absolute;
  opacity: 0;
  height: 100px;
  margin-left: -50px;
}
</style>
